<template>
  <page class="industry-container">
    <TitleBar title="行业分类" refresh />
    <panel class="data-list">
      <div slot="header">
        <div class="dh-lef">数据列表</div>
      </div>
      <div class="dh-add" @click="gotoadd()">
        <el-button type="primary" size="small">添加分类</el-button>
      </div>
      <div v-loading="loading" class="dbd">
        <class-table :table-data="industryData" />
      </div>
    </panel>
    <!-- 分页 -->
    <pagination :pagination="pagination1" @changepage="getList" />
  </page>
</template>
<script>
import { getIndustry, sendIndustry, delIndustry, updateIndustry } from '@/api/usermanage'
import classTable from '../component/class-table'
export default {
  inject: ['reload'],
  components: {
    classTable
  },
  data() {
    return {
      value: true,
      currentPage: 1,
      pageNum: 1,
      pageSize: 5,
      dataTotal: '',
      industryData: [],
      // 状态
      searchState: true,
      viewState: true,
      loading: false,
      pagination1: {}
    }
  },
  created() {
    // this.getList(this.$route.query.tradeCode)
    this.getList()
  },
  methods: {
    getList(pageNum = 1) {
      this.loading = true
      getIndustry({
        pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.industryData = res.data.list
        this.pagination1 = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    gotolink(ev) {
      // 点击跳转至上次浏览页面
      // this.$router.go(-1)
      // //指定跳转地址
      // this.$router.replace("classify");
      console.log(ev)
      this.$router.push({
        path: 'classify',
        query: {
          id: ev
        }
      })
    },
    // 查看下级
    gotolook(row) {
      console.log(row)
      this.$router.push({
        path: 'lookClassify',
        query: { row }
      })
    },
    // 编辑行业分类
    editIndustry(row) {
      this.$router.push({
        path: 'editClassify',
        query: { row }
      })
    },
    // 添加行业
    gotoadd() {
      this.$router.push({
        path: 'addClassify',
        query: { isAdd: 1 }
      })
    },
    switchChangeSearch(ev) {
      // todo: 接口有问题，待联调
      const { id, searchState, viewState } = ev
      updateIndustry({ id, searchState, viewState }).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功！'
          })
        }
      })
    },
    switchChangeView(ev) {
      const { tradeCode, tradeName, parentId, tradeLevel, searchState, viewState, tradeSort, remarks } = ev
      sendIndustry({ tradeCode, tradeName, parentId, tradeLevel, searchState, viewState, tradeSort, remarks }).then(res => {
        console.log(res)
      })
    },
    // 删除行业
    delIndustry(ev) {
      const { id } = ev
      delIndustry({ ids: id }).then(res => {
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.industry-container {
  padding: 0 26px;
  margin: 0 0 16px;
  width:100%;
  overflow-x:auto;
  .panel {
    padding: 10px;
  }
  .dashboard-text {
    margin-top: 17px;
    // min-width: 1500px;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
  }

  .data-list {
    // min-width:1517px;
    .dhead {
      p {
        display: inline;
      }
      .dh-rig {
        float: right;
        width: 200px;
        height: 40px;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 2px;
        color: #333333;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
      }
    }
    .dh-add {
      padding-bottom: 10px;
    }
    .dbd {
      // width: 1464px;
      .bd-head {
        // width: 1464px;
        height: 56px;
        background: rgba(242, 242, 242, 1);
        border-radius: 2px 2px 0px 0px;
      }
    }
  }
  .dlist-bt {
    // width: 1517px;
    .pagination-block {
      // position: absolute;
      // bottom: -117px;
      right: 349px;
    }
  }

  .setting-btn {
    color:#488DFF;
    text-align:center;
    span {
      cursor: pointer;
    }
  }

  #pagination {
    right: 0;
  }
}
</style>

